<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Networx cruise</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="alexSlider.js"></script>
<script type="text/javascript" src="guestWelcomeHomePage.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.slider').Slider({
			fadeEffect : true,
			auto : false,
			counter : true
		});
	});

	$(document).ready(function() {
		var link = $('a.register');
		link.click(function() {
			var pageLink = $(this).attr('href');
			$('div.placeholder').load(pageLink);
			
			return false;
		});
	});
</script>
<style>
body {
	background-color: #AAAAAA;
}

.mid {
	background-image: url('1.png');
	background-repeat: repeat-x;
	height: 800px;
	width: 70%;
}

.container {
	position: relative;
}

.wrapper {
	width: 860px;
	margin: 0 auto;
}

.colone-left {
	float: left;
	width: 370px;
	margin: 0 20px 0 0;
}

.colone-right {
	float: right;
	width: 470px;
	margin: 0 0 0 0;
}

a {
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #000;
}

div.slider {
	width: 250px;
	height: 280px;
	position: relative;
}

div.slider ul {
	margin: 0;
	padding: 0;
}

div.slider ul li img {
	width: 100px;
	height: 150px;
}

div.slider ul li {
	width: 250px;
	list-style: none;
}

.prevBtn {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

.nextBtn {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

h1 {
	font-size: 30px;
	color: white;
}
</style>
</head>
<body>
	
	<map name="links">
		<area shape="rect" alt="" coords="14, 0, 260, 50"
			href="ViewPersonsFriendsLoggedUserServlet">
		<area shape="rect" alt="" coords="270, 0, 526, 50"
			href="RegistredUserHomeServlet">
		<area shape="rect" alt="" coords="536, 0, 780, 50" href="ViewWall.jsp">
	</map>
	
	<div align="center">
		<div class="mid">
			<div class="container">
				<div class="wrapper">
					<div class="header" align="center">
						<img alt="click here to navigate" src="Header.png" usemap="#links">
					</div>
					<div class="colone-right">
						<div class="slider">
							<ul>
								<c:choose>
									<c:when test='${searchStatus == "THERE_IS_SEARCH_RESULTS"}'>
										<c:forEach items="${resultPersonsIAmNotFriendsWith}" var="temp">
											<li><img src="${temp.picture}" />
												<p style="color: white; text-align:left;">this is ${temp.sex} person no
													${temp.id}</p> <a href="javascript:;">${temp.firstName} </a>
													<a href="SendFriendRequestServlet?personID=${temp.id}">Send friend request</a>
													</li>
										</c:forEach>
									</c:when>
									<c:when test='${searchStatus == "NO_SEARCH_RESULTS"}'>
										<b style="color: white;"><br>&nbsp; &nbsp;No Search
											Results.</b>
									</c:when>
								</c:choose>
							</ul>
						</div>
						
						<h3 align="center">Search Results:</h3>
				        <c:choose>
				    		<c:when test='${searchStatus == "THERE_IS_SEARCH_RESULTS"}'>
				    			<table width="95%" border="0" align="center" class="search"> 
				        			<c:forEach items="${resultPersonsIAmFriendsWith}" var="temp">
										<tr>
											<c:choose>
						    					<c:when test='${temp.picture == null}'>
						    						<td width="5%" class="first">
														&nbsp; &nbsp;<a href="GoToSelectedPersonProfileServlet2?personID=${temp.id}" target="_blank">
															<img width="50" height="50" src="anonimus.jpg"></a>
													</td>
						    					</c:when>
						    					<c:when test='${temp.picture != null}'>
						    						<td width="5%" class="first">
														&nbsp; &nbsp;<a href="GoToSelectedPersonProfileServlet2?personID=${temp.id}" target="_blank">
															<img width="50" height="50" src="${temp.picture}"></a>
													</td>	 
						    					</c:when>
						    					<c:otherwise>
						    					</c:otherwise>
			    							</c:choose> 				
											<td width="60%" class="second">
												<h3><a href="GoToSelectedPersonProfileServlet2?personID=${temp.id}" target="_blank">
													${temp.firstName}  ${temp.lastName}</a></h3>
											</td>		
											<td width="35%"><b>You Are Friends</b></td>						
										</tr>
									</c:forEach>
									
									<c:forEach items="${resultPersonsIAmNotFriendsWith}" var="temp">
										<tr>
											<c:choose>
						    					<c:when test='${temp.picture == null}'>
						    						<td width="5%" class="first">
														&nbsp; &nbsp;<a href="GoToSelectedPersonProfileServlet2?personID=${temp.id}" target="_blank">
															<img width="50" height="50" src="anonimus.jpg"></a>
													</td>
						    					</c:when>
						    					<c:when test='${temp.picture != null}'>
						    						<td width="5%" class="first">
														&nbsp; &nbsp;<a href="GoToSelectedPersonProfileServlet2?personID=${temp.id}" target="_blank">
															<img width="50" height="50" src="${temp.picture}"></a>
													</td>	 
						    					</c:when>
						    					<c:otherwise>
						    					</c:otherwise>
			    							</c:choose> 			
											<td width="60%" class="second">
												<h3><a href="GoToSelectedPersonProfileServlet2?personID=${temp.id}" target="_blank">
													${temp.firstName}  ${temp.lastName}</a></h3>
											</td>	
											<td width="35%"><a href="SendFriendRequestServlet?personID=${temp.id}" onclick="friendRequestSentMessage()">
												Send Friend Request</a>
											</td>																
										</tr>
									</c:forEach>
									
									<c:forEach items="${resultLicniProfiliKojimaSamPoslaoZahtevZaPrijateljstvo}" var="temp">
										<tr>
											<c:choose>
						    					<c:when test='${temp.picture == null}'>
						    						<td width="5%" class="first">
														&nbsp; &nbsp;<a href="GoToSelectedPersonProfileServlet2?personID=${temp.id}" target="_blank">
															<img width="50" height="50" src="anonimus.jpg"></a>
													</td>
						    					</c:when>
						    					<c:when test='${temp.picture != null}'>
						    						<td width="5%" class="first">
														&nbsp; &nbsp;<a href="GoToSelectedPersonProfileServlet2?personID=${temp.id}" target="_blank">
															<img width="50" height="50" src="${temp.picture}"></a>
													</td>	 
						    					</c:when>
						    					<c:otherwise>
						    					</c:otherwise>
			    							</c:choose> 				
											<td width="60%" class="second"><h3><a href="GoToSelectedPersonProfileServlet2?personID=${temp.id}" 
												target="_blank">${temp.firstName}  ${temp.lastName}</a></h3>
											</td>	
											<td width="35%"><b>Waiting For Reply</b></td>											
										</tr>
									</c:forEach>
								</table>
				    		</c:when>
				    		<c:when test='${searchStatus == "NO_SEARCH_RESULTS"}'>
				    			<b style="color: red"><br>&nbsp; &nbsp;There Is No Search Results.</b>
				    		</c:when>
			    	 </c:choose>
						
					</div>
					<div class="colone-left">
						<br> <br>
						<p style="color: white;">Here you can checkout registerd users</p>
						<form action="SearchFromRegisteredUserHomePageServlet" method="post" name="SearchForm"
							onsubmit="return checkSearchParametersFromGuestWelcomeHomePage()">
							<table>
								<tr>
									<td><input type="text" name="SearchText"></input>
									</td>
								</tr>
								<tr>
									<td><input type="submit" name="btnSearch" value="Search"></input>
									</td>
								</tr>
								<tr>
									<td style="color: white;">Here you can search for new friends :] <br>
									</td>
								</tr>
							</table>
						</form>
						<!-- <div align="center" style="width: 430px;">
							<div class="placeholder"></div>
						</div> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>